<!doctype html>
<html lang="en">
<head>
  <style>
    .wrapper {
      margin-bottom: 20px;
    }
    .wrapper div {
      height: 18px;
      width: 200px;
      color: white;
    }
    .expected {
      background-color: red;
    }
    .animated {
      background-color: green;
      /* This timing function has value 0 at inputs of 1/3 and 2/3. Chosen because it's very asymmetric about x = y. */
      animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards;
      margin-bottom: 4px;
    }

    .delay_zero {
      animation-delay: 0s;
    }
    .delay_one_third {
      animation-delay: -1000000s;
    }
    .delay_two_thirds {
      animation-delay: -2000000s;
    }
    .delay_three_thirds {
      animation-delay: -3000000s;
    }
    .delay_four_thirds {
      animation-delay: -4000000s;
    }
    .delay_five_thirds {
      animation-delay: -5000000s;
    }
    .delay_six_thirds {
      animation-delay: -6000000s;
    }

    .expected {
      transform: translateX(100px);    
    }
    #normal .expected.delay_six_thirds {
      transform: translateX(200px);
    }
    #alternate .expected.delay_three_thirds {
      transform: translateX(200px);
    }
    #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds {
      transform: translateX(200px);
    }
    #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds {
      transform: translateX(200px);
    }

    #normal div {
      animation-direction: normal;
    }
    #alternate div {
      animation-direction: alternate;
    }
    #reverse div {
      animation-direction: reverse;
    }
    #alternate-reverse div {
      animation-direction: alternate-reverse;
    }
    
    @keyframes move {
      from { transform: translateX(100px); }
      to   { transform: translateX(200px); }
    }
  </style>
</head>
<body>
<div>
  Tests animation direction with timing functions and hardware acceleration.
  The green boxes use live animations and each should line up with the red box
  immediately above it.
</div>
<div class="wrapper" id="normal">
  <div class="expected delay_zero">normal</div>
  <div class="animated delay_zero">normal</div>
  <div class="expected delay_one_third">normal</div>
  <div class="animated delay_one_third">normal</div>
  <div class="expected delay_two_thirds">normal</div>
  <div class="animated delay_two_thirds">normal</div>
  <div class="expected delay_three_thirds">normal</div>
  <div class="animated delay_three_thirds">normal</div>
  <div class="expected delay_four_thirds">normal</div>
  <div class="animated delay_four_thirds">normal</div>
  <div class="expected delay_five_thirds">normal</div>
  <div class="animated delay_five_thirds">normal</div>
  <div class="expected delay_six_thirds">normal</div>
  <div class="animated delay_six_thirds">normal</div>
</div>
<div class="wrapper" id="alternate">
  <div class="expected delay_zero">alternate</div>
  <div class="animated delay_zero">alternate</div>
  <div class="expected delay_one_third">alternate</div>
  <div class="animated delay_one_third">alternate</div>
  <div class="expected delay_two_thirds">alternate</div>
  <div class="animated delay_two_thirds">alternate</div>
  <div class="expected delay_three_thirds">alternate</div>
  <div class="animated delay_three_thirds">alternate</div>
  <div class="expected delay_four_thirds">alternate</div>
  <div class="animated delay_four_thirds">alternate</div>
  <div class="expected delay_five_thirds">alternate</div>
  <div class="animated delay_five_thirds">alternate</div>
  <div class="expected delay_six_thirds">alternate</div>
  <div class="animated delay_six_thirds">alternate</div>
</div>
<div class="wrapper" id="reverse">
  <div class="expected delay_zero">reverse</div>
  <div class="animated delay_zero">reverse</div>
  <div class="expected delay_one_third">reverse</div>
  <div class="animated delay_one_third">reverse</div>
  <div class="expected delay_two_thirds">reverse</div>
  <div class="animated delay_two_thirds">reverse</div>
  <div class="expected delay_three_thirds">reverse</div>
  <div class="animated delay_three_thirds">reverse</div>
  <div class="expected delay_four_thirds">reverse</div>
  <div class="animated delay_four_thirds">reverse</div>
  <div class="expected delay_five_thirds">reverse</div>
  <div class="animated delay_five_thirds">reverse</div>
  <div class="expected delay_six_thirds">reverse</div>
  <div class="animated delay_six_thirds">reverse</div>
</div>
<div class="wrapper" id="alternate-reverse">
  <div class="expected delay_zero">alternate-reverse</div>
  <div class="animated delay_zero">alternate-reverse</div>
  <div class="expected delay_one_third">alternate-reverse</div>
  <div class="animated delay_one_third">alternate-reverse</div>
  <div class="expected delay_two_thirds">alternate-reverse</div>
  <div class="animated delay_two_thirds">alternate-reverse</div>
  <div class="expected delay_three_thirds">alternate-reverse</div>
  <div class="animated delay_three_thirds">alternate-reverse</div>
  <div class="expected delay_four_thirds">alternate-reverse</div>
  <div class="animated delay_four_thirds">alternate-reverse</div>
  <div class="expected delay_five_thirds">alternate-reverse</div>
  <div class="animated delay_five_thirds">alternate-reverse</div>
  <div class="expected delay_six_thirds">alternate-reverse</div>
  <div class="animated delay_six_thirds">alternate-reverse</div>
</div>
</body>
</html>
